<template>
  <div>
    <el-drawer
      v-if="visible"
      class="orderDetail"
      :visible.sync="visible"
      :with-header="false"
      :append-to-body="true"
      size="1200px"
      @close="shut"
    >
      <div class="title">
        <div class="title-text">订单详情{{ detail.orderCode }}</div>
        <el-tag class="tag">{{ formatColumnMap(orderStatusMap, 'value', detail.orderStatus, 'desc') }}</el-tag>
      </div>

      <!-- 左右布局 -->
      <div class="center">
        <!-- 左侧 -->
        <div class="left">
          <div class="steps-box">
            <!-- 已接单5  已完成10-->
            <el-steps :active="activeStep" finish-status="success" simple>
              <el-step title="待分派" />
              <el-step title="待接单" />
              <el-step title="配送中" />
              <el-step title="已完成" />
            </el-steps>
            <div v-if="detail.orderStatus === 3 || detail.orderStatus === 7 || detail.orderStatus === 9 || detail.orderStatus === 12" class="label-child red">{{ formatColumnMap(orderStatusMap, 'value', detail.orderStatus, 'desc') }}</div>
            <div v-else class="label-child green">{{ formatColumnMap(orderStatusMap, 'value', detail.orderStatus, 'desc') }}</div>
          </div>
          <div v-if="distributionWork.userName" class="client-box">
            <div class="title">配送员信息</div>
            <div class="client-table">
              <div class="table-one-row">
                <div class="client-name">姓名</div>
                <div class="client-value">{{ distributionWork.userName + '(' + distributionWork.userCode + ')' }}</div>
                <div class="client-name">电话</div>
                <div class="client-value">{{ distributionWork.uphone }}</div>
              </div>
              <div class="table-one-row">
                <div class="client-name">车辆</div>
                <div class="client-value"><span v-if="distributionWork.truckId" class="csmCode" @click="openVehicleDetail">{{ distributionWork.truckCode }}</span></div>
                <div class="client-name">评价</div>
                <div class="client-value">
                  <el-rate
                    v-model="score"
                    disabled
                    text-color="#ff9900"
                    score-template="{value}"
                    style="height: 15px;"
                  />
                </div>
              </div>
              <div class="table-one-row">
                <div class="client-name">大车司机</div>
                <div class="client-value">{{ detail.driverName }}</div>
                <div class="client-name">押运员</div>
                <div class="client-value">{{ detail.escortName }}</div>
              </div>
            </div>
          </div>
          <div class="client-box">
            <div class="title">客户信息</div>
            <div class="client-table">
              <div class="table-one-row">
                <div class="client-name">客户名称</div>
                <div class="client-value">{{ detail.csmName }}</div>
                <div class="client-name">客户编号</div>
                <div class="client-value"><span class="csmCode" @click="showCsmDetail">{{ detail.csmCode }}</span></div>
              </div>
              <div class="table-one-row">
                <div class="client-name">联系人</div>
                <div class="client-value">{{ detail.csmName }}</div>
                <div class="client-name">联系电话</div>
                <div class="client-value">{{ detail.contactPhone }}</div>
              </div>
              <div class="table-two-row">
                <div class="client-name">联系地址</div>
                <el-tooltip class="item" effect="dark" :content="detail.csmAddress" placement="top">
                  <div class="client-value" style="width: 82%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;">{{ detail.csmAddress }}</div>
                </el-tooltip>
              </div>
            </div>
          </div>
          <div class="client-box">
            <div class="title">订单基本信息</div>
            <div class="client-table">
              <div class="table-one-row">
                <div class="client-name">订单编号</div>
                <div class="client-value">{{ detail.orderCode }}</div>
                <div class="client-name">订单来源</div>
                <div class="client-value">{{ formatColumnMap(orderSourceMap, 'value', detail.fromPlat, 'desc') }}</div>
              </div>
              <div class="table-one-row">
                <div class="client-name">订单类型</div>
                <div class="client-value">{{ formatColumnMap(orderFlagMap, 'value', detail.orderFlag, 'desc') }}</div>
                <div class="client-name">预约时间</div>
                <div class="client-value">{{ detail.appointmentDt&&detail.dateTimeSpare1?parseTime(detail.appointmentDt, '{y}-{m}-{d} {h}:{i}')+'~':'' }}{{ detail.dateTimeSpare1?parseTime(detail.dateTimeSpare1, '{y}-{m}-{d} {h}:{i}'):'' }}</div>
              </div>
              <div class="table-one-row">
                <div class="client-name">签收时间</div>
                <div class="client-value">{{ detail.signDt? parseTime(detail.signDt, '{y}-{m}-{d} {h}:{i}'): '' }}</div>
                <div class="client-name">超时时间</div>
                <div class="client-value" style="color: #f00;">{{ intSpare4Format(detail.intSpare4) }}</div>
              </div>
              <div class="table-one-row">
                <div class="client-name">订单标记</div>
                <div class="client-value">{{ detail.isPickUp?'是':'否' }}</div>
                <div class="client-name">下单时间</div>
                <div class="client-value">{{ detail.transactTime && parseTime(detail.transactTime, '{y}-{m}-{d} {h}:{i}') }}</div>
              </div>
              <div class="table-one-row">
                <div class="client-name">订单备注</div>
                <div class="client-value">{{ detail.remark }}</div>
                <div class="client-name">超时状态</div>
                <div :class="overTimeType === 1 ? 'client-value orange-text' : 'client-value red-text'">{{ overTimeType === 1 ? '超时预警' : overTimeType === 2 ? '已超时' : '' }}</div>
              </div>
              <div class="table-one-row">
                <div class="client-name">催单次数</div>
                <div class="client-value">{{ detail.urgeCount }}</div>
                <div class="client-name">最后催单时间</div>
                <div class="client-value" style="color: #f00;">{{ detail.lastUrgeDt? parseTime(detail.lastUrgeDt, '{y}-{m}-{d} {h}:{i}'): '' }}</div>
              </div>
              <div v-if="detail.externalOrderCode" class="table-one-row">
                <div class="client-name">外部订单号</div>
                <div class="client-value">{{ detail.externalOrderCode }}</div>
                <div class="client-name">外部客户编号</div>
                <div class="client-value">{{ detail.externalCsmCode }}</div>
              </div>
            </div>
          </div>
          <div class="commodity-box">
            <div class="title">商品信息</div>
            <div class="commodity-table-box">
              <div class="table-title">
                <div>商品描述</div>
                <div>商品数量</div>
                <div>商品单价（元）</div>
                <div>优惠类型</div>
                <div>远距配送费</div>
                <div>上楼费</div>
                <div>优惠金额</div>
                <div>净重</div>
                <div>回收气量</div>
              </div>
              <div v-for="(item,index) in detail.detailList" :key="index" class="table-value">
                <div>{{ item.goodsName }}</div>
                <div>{{ item.gcount }}</div>
                <div>{{ item.gprince }}</div>
                <div>{{ item.deliveryType ? formatColumnMap(deliveryTypeMap, 'value', item.deliveryType, 'desc') :'' }}</div>
                <div>{{ item.fee1 }}</div>
                <div>{{ item.fee2 }}</div>
                <div>{{ item.fee4 }}</div>
                <div>{{ item.netWeight }}</div>
                <div>{{ item.fee3 }}</div>
              </div>
            </div>
          </div>
          <div class="cost-box">
            <div class="title">费用信息</div>
            <div class="cost-table-box">
              <div class="table-title">
                <div>商品总金额</div>
                <div>总远距配送费</div>
                <div>总上楼费</div>
                <!-- <div>退残金额</div> -->
                <div>服务费</div>
                <div>优惠金额</div>
                <div>订单总额</div>
              </div>
              <div class="table-value">
                <div>{{ isNaN(Number(countPrice)) ? '' : Number(countPrice).toFixed(2) }}</div>
                <div>{{ isNaN(Number(detail.decimalSpare1)) ? '' : Number(detail.decimalSpare1).toFixed(2) }}</div>
                <div>{{ isNaN(Number(detail.decimalSpare2)) ? '' : Number(detail.decimalSpare2).toFixed(2) }}</div>
                <!-- <div></div> -->
                <div>{{ isNaN(Number(detail.decimalSpare3)) ? '' : Number(detail.decimalSpare3).toFixed(2) }}</div>
                <div>{{ isNaN(Number(detail.totalFee4)) ? '' : Number(detail.totalFee4).toFixed(2) }}</div>
                <div>{{ isNaN(Number(detail.decimalSpare4)) ? '' : Number(detail.decimalSpare4).toFixed(2) }}</div>
              </div>
              <div class="table-one-row">
                <div class="client-name">应收金额</div>
                <div class="client-value">{{ isNaN(Number(detail.treceivables)) ? '' : Number(detail.treceivables).toFixed(2) }}</div>
                <div class="client-name">实收金额</div>
                <div class="client-value">{{ detail.payStatus !== 1?(isNaN(Number(detail.taccReceivable)) ? '' : Number(detail.taccReceivable).toFixed(2)):'' }}</div>
              </div>
              <div class="table-one-row">
                <div class="client-name">支付方式</div>
                <div class="client-value">{{ detail.paymentMethod ? formatColumnMap(paymentMethodMap, 'value', detail.paymentMethod, 'desc') : '' }}</div>
                <div class="client-name">支付状态</div>
                <div class="client-value">{{ detail.payStatus ? formatColumnMap(payStatusMap, 'value', detail.payStatus, 'desc') : '未支付' }}</div>
              </div>
              <div class="table-one-row">
                <div class="client-name">退款方式</div>
                <div class="client-value">
                  <!--  单据状态=已退货/已退单 支付状态=已退款 展示退款状态 否则为空 -->
                  {{ ((detail.orderStatus === 7 || detail.orderStatus === 12) && detail.payStatus === 5) ?
                    (detail.recycleGasBillInfo && detail.recycleGasBillInfo.paymentMethod ? formatColumnMap(paymentMethodMap, 'value', detail.recycleGasBillInfo.paymentMethod, 'desc') : '')
                    : ''
                  }}
                </div>
                <div class="client-name">实退金额</div>
                <div class="client-value">
                  {{ ((detail.orderStatus === 7 || detail.orderStatus === 12) && detail.payStatus === 5) ?
                    (detail.recycleGasBillInfo && !isNaN(Number(detail.recycleGasBillInfo.returnAmount)) ? Number(detail.recycleGasBillInfo.returnAmount).toFixed(2) : '')
                    :''
                  }}
                </div>
              </div>
            </div>
          </div>
          <div v-if="detail.orderStatus === 10 || detail.orderStatus === 12 || detail.orderStatus === 9" class="client-box">
            <div class="title">签收信息</div>
            <div class="client-table">
              <div class="table-one-row">
                <div class="client-name">签收时间 </div>
                <div class="client-value">{{ detail.signDt?parseTime(detail.signDt, '{y}-{m}-{d} {h}:{i}'):'' }}</div>
                <div class="client-name">关联安检单</div>
                <div v-if="detail.checkCode" class="client-value csmCode" @click="showCheckDetail(detail.checkCode)">{{ detail.checkCode }}</div>
              </div>
              <div class="table-one-row">
                <div class="client-name">签收人</div>
                <div class="client-value">{{ detail.signUserName }}</div>
                <div class="client-name">签收人身份证号</div>
                <div class="client-value">{{ detail.signUserIdNumber }}</div>
              </div>
              <div class="table-one-row">
                <div class="client-name">重瓶编号</div>
                <div class="client-value">{{ detail.newGPBMIDS }}</div>
                <div class="client-name">重瓶芯片号</div>
                <div class="client-value">
                  <span v-for="(item, index) in detail.newChipIDS" :key="index" class="csmCode" @click="showCylinderDetail(item, detail.newGPBMIDS.split(',')[index])">
                    {{ item }}
                    <span v-if="index !== detail.newChipIDS.length-1">,</span>
                  </span>
                </div>
              </div>
              <div class="table-one-row">
                <div class="client-name">空瓶编号</div>
                <div class="client-value">{{ detail.recGPBMIDS }}</div>
                <div class="client-name">空瓶芯片号</div>
                <div class="client-value">
                  <span v-for="(item, index) in detail.recChipIDS" :key="index" class="csmCode" @click="showCylinderDetail(item, detail.recGPBMIDS.split(',')[index])">
                    {{ item }}
                    <span v-if="index !== detail.recChipIDS.length-1">,</span>
                  </span>
                </div>
              </div>
              <!-- 暂不开发 -->
              <!-- <div class="table-one-row" style="border-bottom: none;">
                <div class="client-name">关联押金单</div>
                <div v-if="detail.relevancyDepositCodes" class="client-value">
                  <span v-for="(item, index) in relevancyDepositCodes" :key="index" class="csmCode" @click="showDeposit(detail.depositCode)">{{ item + (index+1===relevancyDepositCodes.length)?'':',' }}</span>
                </div>
              </div> -->
            </div>
          </div>

          <div v-if="detail.recycleGasBillInfo && (corpSettingData.sp6 >> 22 & 0x01) === 0x01" class="client-box">
            <div class="title">退货信息</div>
            <div class="client-table">
              <div class="table-one-row">
                <div class="client-name">退货扫瓶时间 </div>
                <div class="client-value">{{ detail.recycleGasBillInfo.scanTime ? parseTime(detail.recycleGasBillInfo.scanTime , '{y}-{m}-{d} {h}:{i}:{s}') : '' }}</div>
                <div class="client-name">退货单据号</div>
                <div class="client-value">{{ detail.recycleGasBillInfo.billCode }}</div>
              </div>
              <div class="table-one-row">
                <div class="client-name">退货扫瓶人</div>
                <div class="client-value">{{ detail.recycleGasBillInfo.scanUser }}</div>
                <div class="client-name">单据状态</div>
                <div class="client-value">{{ detail.recycleGasBillInfo.billStatus ? formatColumnMap(billStatusMap, 'value', detail.recycleGasBillInfo.billStatus, 'desc') : '' }}</div>
              </div>
              <div class="table-one-row">
                <div class="client-name">重瓶编号</div>
                <div class="client-value">{{ detail.recycleGasBillInfo.recGPBMIDS }}</div>
                <div class="client-name">重瓶芯片号</div>
                <div class="client-value">
                  <span v-for="(item, index) in detail.recycleGasBillInfo.recChipIDS" :key="index" class="csmCode" @click="showCylinderDetail(item, detail.recycleGasBillInfo.recGPBMIDS ? detail.recycleGasBillInfo.recGPBMIDS.split(',')[index]: '')">
                    {{ item }}
                    <span v-if="index !== detail.recycleGasBillInfo.recChipIDS.length-1">,</span>
                  </span>
                </div>
              </div>
              <div class="table-one-row">
                <div class="client-name">空瓶编号</div>
                <div class="client-value">{{ detail.recycleGasBillInfo.newGPBMIDS }}</div>
                <div class="client-name">空瓶芯片号</div>
                <div class="client-value">
                  <span v-for="(item, index) in detail.recycleGasBillInfo.newChipIDS" :key="index" class="csmCode" @click="showCylinderDetail(item, detail.recycleGasBillInfo.newGPBMIDS ? detail.recycleGasBillInfo.newGPBMIDS.split(',')[index] : '') ">
                    {{ item }}
                    <span v-if="index !== detail.recycleGasBillInfo.newChipIDS.length-1">,</span>
                  </span>
                </div>
              </div>
              <!-- 暂不开发 -->
              <!-- <div class="table-one-row" style="border-bottom: none;">
                <div class="client-name">关联押金单</div>
                <div v-if="detail.relevancyDepositCodes" class="client-value">
                  <span v-for="(item, index) in relevancyDepositCodes" :key="index" class="csmCode" @click="showDeposit(detail.depositCode)">{{ item + (index+1===relevancyDepositCodes.length)?'':',' }}</span>
                </div>
              </div> -->
            </div>
          </div>

          <div v-if="detail.imageList && detail.imageList.length > 0" class="signature">
            <div class="item-title">客户签字</div>
            <div>
              <el-image v-for="item in detail.imageList" :key="item" class="image" :src="item" :preview-src-list="[item]" />
            </div>
          </div>
          <div v-if="detail.refundImgsUrl && detail.refundImgsUrl.length > 0" class="signature">
            <div class="item-title">撤单照片</div>
            <div>
              <el-image v-for="item in detail.refundImgsUrl" :key="item" class="image" :src="item" :preview-src-list="[item]" />
            </div>
          </div>

          <!-- <div class="client-box">
            <div class="title">发票信息</div>
          </div> -->
          <!-- <div class="client-box">
            <div class="title">安检信息</div>
            <div class="client-table">
              <div class="table-one-row">
                <div class="client-name">安检单号</div>
                <div class="client-value">123</div>
                <div class="client-name">隐患等级</div>
                <div class="client-value">1</div>
              </div>
              <div class="table-one-row">
                <div class="client-name">安检类型</div>
                <div class="client-value">类型</div>
              </div>
            </div>
          </div> -->
        </div>
        <!-- 右侧 -->
        <div class="right">
          <div>
            <i v-if="innerDrawer" class="el-icon-s-unfold optionBtn" @click="optionBtnChange">收起</i>
            <i v-else class="el-icon-s-fold optionBtn" @click="optionBtnChange">展开</i>
          </div>
          <div class="timeline-title">订单日志</div>
          <el-timeline>
            <el-timeline-item v-for="(item, index) in flowInfoData" :key="index" :timestamp="`${parseTime(item.traceTime, '{y}-{m}-{d} {h}:{i}')} ${item.contacter}`" placement="top">
              <el-card>
                <h4>{{ item.traceDesc }}</h4>
                <h4 v-if="item.other" style="white-space: pre-wrap;" v-html="item.other" />
                <h4 v-if="item.marker">{{ `备注:${item.marker}` }}</h4>
                <p>{{ `发生部门&nbsp;——&nbsp;${item.facilityName ? item.facilityName : '系统'}` }}</p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
      <!-- 底部 -->
      <div class="demo-drawer__footer" style="padding: 0 10px 10px 0; text-align: right;">
        <div class="btn-group">
          <div class="btns">
            <el-button v-if="detail.orderStatus === 2" v-show="$btnPermission([40101, 2])" type="primary" @click="openTransferOrder"> 转派 </el-button>
            <el-button v-if="detail.orderStatus === 2 || detail.orderStatus === 5" v-show="$btnPermission([40101, 3])" type="warning" @click="openPressOrder"> 催单 </el-button>
            <el-button v-if="detail.orderStatus === 2 || detail.orderStatus === 5" v-show="$btnPermission([40101, 5])" type="success" @click="openSignOrder"> 签单 </el-button>
            <el-button v-if="(detail.orderStatus === 2 || detail.orderStatus === 5) && !!(corpSettingData.sp4 >> 22 & 0x01)" v-show="$btnPermission([40101, 4])" type="danger" @click="openBackOrder"> 退单 </el-button>
            <el-button
              v-if="detail.orderStatus === 10 && detail.reStatus === 2"
              v-show="$btnPermission([40101, 14])"
              type="primary"
              @click="openReceiptConfirm"
            > 回执确认 </el-button>
            <el-button v-show="$btnPermission([40101, 11])" type="primary" @click="returnPrint"> 回单打印 </el-button>
            <el-button v-show="$btnPermission([40101, 7])" type="primary" @click="openRemark"> 备注 </el-button>
            <el-button v-if="detail.orderStatus === 10 && detail.reStatus !== 2" v-show="$btnPermission([40101, 6])" type="danger" @click="openBackGoods"> 退货 </el-button>
            <el-button v-if="detail.payStatus !== 3 && detail.fromPlat === 4 && (detail.paymentMethod === 2 || detail.paymentMethod === 128)" v-show="$btnPermission([40101, 15])" type="primary" @click="openGather(detail)"> 收款 </el-button>
            <el-button v-show="$btnPermission([40101, 9])" type="primary" @click="tryPrint"> 打印 </el-button>
            <el-button v-if="detail.orderStatus === 1 ||detail.orderStatus === 2 ||detail.orderStatus === 5" v-show="$btnPermission([40101, 13])" type="primary" @click="editAppointmentTime(detail)">修改预约时间</el-button>
          </div>
          <el-button @click="visible = false"> 关闭 </el-button>
        </div>
      </div>
      <el-drawer
        :append-to-body="true"
        :visible.sync="innerDrawer"
        size="800px"
        custom-class="overTimeDrawer"
      >
        <i v-if="innerDrawer" class="el-icon-s-unfold optionBtn" @click="optionBtnChange">收起</i>
        <i v-else class="el-icon-s-fold optionBtn" @click="optionBtnChange">展开</i>
        <div class="overtime-content">
          <div class="right-overtime">
            <div class="title-top">
              <div class="timeline-title">订单日志</div>
              <div class="timeline-title title-orange">时效解析</div>
            </div>

            <div v-for="(item, index) in flowInfoData" :key="index" class="overtime-detail">
              <p class="time-title">{{ parseTime(item.traceTime, '{y}-{m}-{d} {h}:{i}:{s}') }} {{ item.contacter }}</p>
              <div class="item-detail">
                <el-card class="overtime-item">
                  <h4>{{ item.traceDesc }}</h4>
                  <h4 v-if="item.marker">{{ `备注:${item.marker}` }}</h4>
                  <p>{{ `发生部门&nbsp;——&nbsp;${item.facilityName ? item.facilityName : '系统'}` }}</p>
                </el-card>

                <el-card v-if="!((!secondsToHMS(item.duration))&&(!item.appointmentDtStr)&&(!item.isTimeout))">
                  <p v-if="secondsToHMS(item.duration)">步骤间隔：{{ secondsToHMS(item.duration) }}</p>
                  <p v-if="item.appointmentDtStr">当前预约时间：{{ item.appointmentDtStr }}</p>
                  <p v-if="item.isTimeout">超时状态：<span :style="item.isTimeout === 1?'color:#ed912e':'color:#f00'"> {{ item.isTimeout === 1 ? '超时预警' : item.isTimeout === 2 ? '已超时' : '' }}</span></p>
                </el-card>
              </div>
            </div>
          </div>
        </div>
      </el-drawer>
    </el-drawer>
    <remark-order ref="remarkOrder" />
    <press-order ref="pressOrder" />
    <back-order ref="backOrder" />
    <back-order-apply ref="backOrderApply" />
    <sign-order
      ref="signOrder"
      :transactor-list="transactorList"
      :payment-method-map="paymentMethodMap"
    />
    <transfer-order ref="transferOrder" />
    <back-goods ref="backGoods" :payment-method-map="paymentMethodMap" />
    <receipt-confirm ref="receiptConfirm" :payment-method-map="paymentMethodMap" />
    <flow-info ref="flowInfo" />
    <csm-detail ref="csmDetail" :tree-data="treeData" />
    <cylinderDetail ref="cylinderDetail" />
    <Gather ref="gather" />
    <vehicleDetail ref="vehicleDetail" />
    <securityOrderInfo
      ref="securityOrderInfo"
      :tree-data="treeData"
      :parent-fetch-data="refresh"
    />
    <change-appointmentDt ref="changeAppointmentDt" />
    <!-- <popups
      ref="popups"
      :ent-type-list="entTypeList"
      :tree-data="treeData"
      :calc-type-list="calcTypeList"
      :payment-method-list="paymentMethodList"
      :pay-status-list="payStatusList"
      :paymen-fil-list="paymenFilList"
      :customer-type="customerType"
    /> -->
  </div>
</template>

<script>
  import { queryMap, queryTransactorList, queryOrderDetailData, queryOrderFlowInfo, querySpecAliasList, queryOrderbillReturnParam, batchOrderBatchDetail, queryCsmInfo, queryByUserId, invenTruckDetail, orderbillRecord, freeBottle, orderbillCanUrge } from '@/api'
  import moment from 'dayjs'
  import { formatColumnMap, formatFixed2, parseTime, secondsToHMS } from '@/utils'
  import { toRMB } from '@/filters'
  import getTreeData from '@/utils/jsonTree'
  import { mapGetters } from 'vuex'
  import { mergeAsyncFunc } from '@/utils/mergeAsyncFunc'
  import RemarkOrder from './Remark'
  import FlowInfo from './OrderFlow'
  import TransferOrder from '../../../components/TransferOrderModal'
  import PressOrder from '../../../components/PressOrderModal'
  import BackOrder from './BackOrder'
  import BackOrderApply from './BackOrderApply'
  import SignOrder from './SignOrder'
  import BackGoods from './BackGoods'
  import ReceiptConfirm from './ReceiptConfirm'
  import CylinderDetail from '@/views/components/cylinderDetail/index'
  import Gather from './gather.vue'
  import store from '@/store'
  import dayjs from 'dayjs'
  import ChangeAppointmentDt from '../../../components/ChangeAppointmentDt'
  // import Popups from '@/views/customerCenter/depositManage/components/Popups'
  export default {
    name: 'OrderDetails',
    components: {
      RemarkOrder,
      FlowInfo,
      TransferOrder,
      PressOrder,
      BackOrder,
      BackOrderApply,
      SignOrder,
      BackGoods,
      ReceiptConfirm,
      CsmDetail: () => import('../../../components/CsmDetailModal/index.vue'),
      CylinderDetail,
      Gather,
      vehicleDetail: () => import('../../../distributionManage/vehicleManage/components/vehicleDetail.vue'),
      securityOrderInfo: () => import('../../../safetySupervise/securityOrderManage/components/securityOrderInfo.vue'),
      ChangeAppointmentDt
      // Popups
    },
    props: {
    },
    data() {
      return {
        moment,
        formatColumnMap,
        parseTime,
        baseSrc: 'http://image.haoyunqi.com.cn/',
        visible: false,
        detail: {
          orderStatus: ''
        },
        overTimeType: '',
        activeStep: 1,
        deliveryTypeMap: [{ desc: '大车用户', value: 1 }, { desc: '电子围栏用户', value: 2 }],
        specList: [],
        flowInfoData: [], // 流转信息
        paymentMethodMap: [],
        orderStatusMap: [],
        orderFlagMap: [],
        payStatusMap: [],
        orderSourceMap: [],
        transactorList: [],
        tableData: {
          column: [
            {
              prop: 'goodsName',
              label: '商品名称',
              width: 120
            },
            {
              prop: 'gprince',
              align: 'right',
              label: '单价',
              formatter: row => formatFixed2(row.gprince)
            },
            {
              prop: 'gcount',
              align: 'right',
              label: '数量'
            },
            {
              prop: 'gprefPrice',
              align: 'right',
              label: '优惠金额',
              formatter: row => formatFixed2(row.gprefPrice)
            },
            {
              prop: 'netWeight',
              align: 'right',
              label: '净重',
              render: (h, { row }) => <span>{ row.netWeight ? row.netWeight : 0 }KG</span>
            },
            {
              prop: 'fee3',
              align: 'right',
              label: '回收气量',
              render: (h, { row }) => <span>{ row.fee3 ? row.fee3 : 0 }KG</span>
            },
            {
              prop: 'fee1',
              align: 'right',
              label: '远距配送费',
              formatter: row => formatFixed2(row.fee1)
            },
            {
              prop: 'fee2',
              align: 'right',
              label: '上楼费',
              formatter: row => formatFixed2(row.fee2)
            },
            {
              prop: 'tip',
              align: 'right',
              label: '服务费',
              formatter: row => formatFixed2(row.tip)
            }
          ],
          data: []
        },
        distributionWork: {
          userName: ''
        },
        treeData: [],
        score: 4,
        countPrice: 0,
        billStatusMap: [{ 'value': -1, 'desc': '作废', 'key': 'INVALID' }, { 'value': 1, 'desc': '未审核', 'key': 'NOTCHECKED' }, { 'value': 2, 'desc': '已审核', 'key': 'CHECKED' }, { 'value': 3, 'desc': '已驳回', 'key': 'REJECTED' }],
        innerDrawer: false
      }
    },
    computed: {
      statusImg: function() {
        if (this.detail.orderStatus) return require(`@/assets/order_status/${this.detail.orderStatus}.png`)
        return ''
      },
      ...mapGetters([
        'orgList', 'corpSettingData', 'menusArr'
      ])
    },
    created() {
      this.getGoodsSpecList()
    },
    methods: {
      secondsToHMS,
      async open(temp, type) {
        await this.queryOptionsMap()
        await this.getDetailData(temp.orderCode)
        this.getFlowInfoData(temp.orderCode)
        this.overTimeType = temp.overTimeType
        if (type && type === 'overTime') {
          this.type = type
          this.innerDrawer = true
        }
        return new Promise((resolve) => {
          this.resolve = resolve
          this.queryByUserId(temp)
          this.getTreeData()
          this.visible = true
        })
      },
      // 查询枚举
      async queryOptionsMap() {
        const [res1, res2, res3, res4, res5] = await Promise.all([
          mergeAsyncFunc(queryMap, { enumName: 'PaymentMethod' }),
          mergeAsyncFunc(queryMap, { enumName: 'OrderStatus' }),
          mergeAsyncFunc(queryMap, { enumName: 'OrderFlag' }),
          mergeAsyncFunc(queryMap, { enumName: 'PayStatus' }),
          mergeAsyncFunc(queryMap, { enumName: 'OrderSource' })
        ])
        this.paymentMethodMap = res1.data.filter(item => item.value === 1 || item.value === 2 || item.value === 16 || item.value === 128 || item.value === 256 || item.value === 2048 || item.value === 1024) // 支付方式
        this.orderStatusMap = res2.data.filter((item) => item.value !== 6) // 订单类型(去掉‘已转派’)
        this.orderFlagMap = res3.data // 订单类型
        this.payStatusMap = res4.data // 支付状态
        this.orderSourceMap = res5.data // 订单来源
        this.getTransactorList()
      },
      // 获取下单人列表
      async getTransactorList() {
        const res = await queryTransactorList({})
        this.transactorList = res.data
      },
      async queryByUserId(temp) {
        this.distributionWork = {}
        if (temp.ownerId) {
          const res = await queryByUserId({ userId: temp.ownerId })
          if (res.data) {
            this.distributionWork = res.data
          }
        }
        // 如果是已审核或未审核状态
        if (this.detail.orderStatus === 1 || this.detail.orderStatus === 2) {
          // 如果处理人不是配送人
          if (!this.distributionWork.userName) {
            this.activeStep = 1
          } else {
            this.activeStep = 2
          }
        }
        // 已接单、已出库
        if (this.detail.orderStatus === 5 || this.detail.orderStatus === 8) {
          this.activeStep = 3
        }
        // 已退货、退货中  已完成
        if (this.detail.orderStatus === 9 || this.detail.orderStatus === 12 || this.detail.orderStatus === 10) {
          this.activeStep = 4
        }
        if (this.detail.orderStatus === 3 || this.detail.orderStatus === 7) {
          this.activeStep = -1
        }
      },
      async getDetailData(orderCode) {
        const res = await queryOrderDetailData({ orderCode })
        this.detail = res.data
        this.tableData.data = res.data.detailList
        this.countPrice = 0
        this.detail.detailList.forEach((item) => {
          if (item.gprince && item.gcount) {
            this.countPrice += item.gprince * item.gcount
          }
        })
        if (this.detail.newGPBMIDS) {
          const newGPBMIDS = this.detail.newGPBMIDS.split(',')
          newGPBMIDS.forEach((item, index) => {
            if (item === '11111111') {
              newGPBMIDS[index] = '未知'
            }
          })
          this.detail.newGPBMIDS = newGPBMIDS.join(',')
        }
        if (this.detail.recGPBMIDS) {
          const recGPBMIDS = this.detail.recGPBMIDS.split(',')
          recGPBMIDS.forEach((item, index) => {
            if (item === '11111111') {
              recGPBMIDS[index] = '未知'
            }
          })
          this.detail.recGPBMIDS = recGPBMIDS.join(',')
        }
        if (this.detail.newChipIDS) {
          this.detail.newChipIDS = this.detail.newChipIDS.indexOf(',') > -1 ? this.detail.newChipIDS.split(',') : [this.detail.newChipIDS]
        }
        if (this.detail.recChipIDS) {
          this.detail.recChipIDS = this.detail.recChipIDS.indexOf(',') > -1 ? this.detail.recChipIDS.split(',') : [this.detail.recChipIDS]
        }
        if (this.detail.recycleGasBillInfo) {
          this.detail.recycleGasBillInfo.newChipIDS = this.detail.recycleGasBillInfo.newChipIDS ? this.detail.recycleGasBillInfo.newChipIDS.split(',') : ''
        }
        if (this.detail.recycleGasBillInfo) {
          this.detail.recycleGasBillInfo.recChipIDS = this.detail.recycleGasBillInfo.recChipIDS ? this.detail.recycleGasBillInfo.recChipIDS.split(',') : ''
        }
        if (this.detail.imageList && this.detail.imageList.length > 0) {
          this.detail.imageList = this.detail.imageList.map(item => (this.baseSrc + item.imageUrl))
        }
        if (this.detail.refundImgUrl) {
          const r = this.detail.refundImgUrl.split(';')
          this.detail.refundImgsUrl = r.map(item => (this.baseSrc + item))
        }
      },
      async getFlowInfoData(orderCode) {
        const res = await queryOrderFlowInfo({
          orderCode
        })
        this.flowInfoData = JSON.parse(res.data.traceList)
      },
      async getGoodsSpecList() {
        const res = await querySpecAliasList()
        this.specList = res.data
      },
      getSummaries(param) {
        const { columns, data } = param
        const sums = []
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计'
            return
          }
          if (index === 1) {
            sums[index] = ''
            return
          }
          const values = data.map(item => Number(item[column.property]))
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
          }
        })
        sums[3] = Number(sums[3]).toFixed(2)
        sums[4] = sums[4] ? sums[4] + 'KG' : '0KG'
        sums[5] = sums[5] ? sums[5] + 'KG' : '0KG'
        sums[6] = Number(sums[6]).toFixed(2)
        sums[7] = Number(sums[7]).toFixed(2)
        sums[8] = Number(sums[8]).toFixed(2)
        return sums
      },
      intSpare4Format(v) {
        if (v) {
          var h = Math.floor(v / 60)
          var m = v % 60
          // var s=v-60*h-60*m;
          if (h < 10) h = '0' + h
          if (m < 10) m = '0' + m
          return h + ':' + m
          /* if(h >= 1) {
            if(m > 0) {
              return h + "小时" + m + "分钟";
            } else {
              return h + "小时";
            }
          } else {
            return m + "分钟";
          }*/
        }
        return ''
      },
      // 点击备注
      async openRemark() {
        await this.$refs.remarkOrder.open(this.detail)
      },
      // 点击流转信息
      async openFlow() {
        await this.$refs.flowInfo.open(this.detail.orderCode)
      },
      // 点击转派
      async openTransferOrder() {
        await this.$refs.transferOrder.open(this.detail)
      },
      // 点击催单
      async openPressOrder() {
        if (this.detail.transactTime) {
          const n = dayjs(new Date())
          const d = dayjs(this.detail.transactTime)
          const appointmentDt = this.detail.appointmentDt ? dayjs(this.detail.appointmentDt).format('YYYY-MM-DD') : ''
          const today = dayjs(new Date()).format('YYYY-MM-DD')
          const f = n.diff(d, 'minute')
          if ((appointmentDt && today && appointmentDt === today)) {
            if (f > 30) { // 预约当天且下单超过30分钟
              this.toPressOrder(this.detail)
            } else {
              this.$message.warning('下单30分钟后才可进行催单！')
            }
          } else {
            if (dayjs(appointmentDt) > dayjs(today)) { // 预约时间不是今天未达到
              this.$message.warning('仅预约当天支持催单!')
            } else { // 预约时间是今天之前
              this.toPressOrder(this.detail)
            }
          }
        }
      },
      async toPressOrder(row) {
        const params = { orderCode: row.orderCode }
        const res = await orderbillCanUrge(params)
        if (res) {
          if (res.data === 1) {
            this.$message.warning('该场站本时间段不支持催单！')
          } else {
            await this.$refs.pressOrder.open({ billCode: this.detail.orderCode, billType: 1 })
            this.$refs.lbTable.fetch({ currentPage: 1 })
          }
        }
      },
      // type 默认退单类型
      isShowChargeBackConfirmDialog(row, type = 'backOrder') {
        const tip = type === 'backOrder' ? '点击退单审核通过后，押金单原路退回，是否继续退单？' : '审核通过后，押金单原路退回，是否继续退货？'
        const confirmButtonText = type === 'backOrder' ? '立即退单' : '立即退货'
        const cancelButtonText = type === 'backOrder' ? '暂不退单' : '暂不退货'
        return new Promise((resolve, reject) => {
          // 是否需要先展示退货退单提示确认弹窗
          if (row.relatedDepositCode) {
            this.$confirm(tip, '提示', {
              confirmButtonText: confirmButtonText,
              cancelButtonText: cancelButtonText,
              type: 'warning'
            }).then(async() => {
              resolve()
            }).catch(() => {
              // this.$message({
              //   type: 'info',
              //   message: '已取消退货'
              // })
            })
          } else {
            resolve()
          }
        })
      },
      // 点击退单
      async openBackOrder() {
        await this.isShowChargeBackConfirmDialog(this.detail, 'backOrder')
        const res = await queryOrderbillReturnParam({
          orderCode: this.detail.orderCode,
          ownerId: this.detail.ownerId
        })
        const showCheck = JSON.parse(res.data.showCheck)
        if (showCheck) await this.$refs.backOrderApply.open(res.data)
        else await this.$refs.backOrder.open(res.data)
      },
      // 点击签单
      async openSignOrder() {
        await this.$refs.signOrder.open(this.detail)
      },
      // 点击回执确认
      async openReceiptConfirm() {
        await this.$refs.receiptConfirm.open(this.detail)
      },
      // 点击退货
      async openBackGoods() {
        await this.isShowChargeBackConfirmDialog(this.detail, 'backGoods')
        await this.$refs.backGoods.open(this.detail)
      },
      async invenTruckDetail() {
        const res = await invenTruckDetail({ id: this.distributionWork.truckId })
        return res.data
      },
      // 车辆详情
      async openVehicleDetail() {
        const info = await this.invenTruckDetail()
        this.$refs.vehicleDetail.open(info)
      },
      async tryPrint() {
        const params = {
          orderCode: this.detail.orderCode
        }
        const { status, data } = await batchOrderBatchDetail(params)
        if (status === 200) {
          await this.tryPrint2(this.detail)
          this.tryPrint1(this.detail, data)
        }
      },
      async tryPrint1(row, items) {
        const params = {
          csmId: row.csmId
        }
        const { status, data } = await queryCsmInfo(params)
        if (status === 200) {
          row['lastBuyDt'] = data['lastBuyDt'] || ''
          row['score'] = data['score'] || 0
          this.print(row, items)
        }
      },
      async tryPrint2(row) {
        const params = {
          orderCode: row.orderCode
        }
        const { status, data } = await orderbillRecord(params)
        if (status === 200) {
          row['fee1'] = data['fee1'] || 0
          row['fee2'] = data['fee2'] | 0
          row['preferentialPackageName'] = data['preferentialPackageName'] || ''
          row['preferentialCount'] = data['preferentialCount'] || 0
          // 预约时间
          var reservationDt = ''
          var day = parseTime(row.appointmentDt || row.dateTimeSpare1, '{y}-{m}-{d} ')
          if (row.appointmentDt && !row.dateTimeSpare1) {
            const time1 = parseTime(row.appointmentDt, '{h}:{i}')
            reservationDt = String.format('{0}{1}之后', day, time1)
          } else if (!row.appointmentDt && row.dateTimeSpare1) {
            const time2 = parseTime(row.dateTimeSpare1, '{h}:{i}')
            reservationDt = String.format('{0}{1}之前', day, time2)
          } else {
            const time1 = parseTime(row.appointmentDt, '{h}:{i}')
            const time2 = parseTime(row.dateTimeSpare1, '{h}:{i}')
            reservationDt = String.format('{0}{1}至{2}', day, time1, time2)
          }
          row.reservationDt = reservationDt
        }
        return row
      },
      print(row2, items) {
        const row = JSON.parse(JSON.stringify(row2))
        const cache = JSON.parse(localStorage.tp)
        if (!cache) {
          this.$message.warning('请先设置打印模板')
          return
        }
        const temp = cache['38']
        if (!temp) {
          this.$message.warning('请先设置打印模板')
          return
        }

        row.printDt = parseTime(row.transactTime, '{y}-{m}-{d} {h}:{i}')
        // row.dateTimeSpare2 = dayjs(row.dateTimeSpare2).format('YYYY-MM-DD hh:mm')
        row.printMoney = `${row.treceivables}(${toRMB(row.treceivables)})`
        row.payMethod = ''
        if (row.fromPlat !== 1 && row.fromPlat !== 7) {
          for (var item of this.paymentMethodMap) {
            if ((item.value & row.paymentMethod) > 0) {
              row.payMethod += item.desc + ','
            }
          }
          row.payMethod = (row.payMethod || '').replace(/(^,+)|(,+$)/g, '')
        }
        for (var i in items) {
          const item = items[i]
          item.goodsTotalPrice = this.toDecimal(item.gcount * item.gprince, 2).toFixed(2)
          item.gprince = this.toDecimal(item.gprince, 2).toFixed(2)
          item.fee1 = this.toDecimal(item.fee1, 2).toFixed(2)
          item.fee2 = this.toDecimal(item.fee2, 2).toFixed(2)
        }
        if (row.payStatus === 3) {
          row.printMoney = `${row.printMoney} 已支付(${formatColumnMap(
            this.paymentMethod,
            'value',
            row.payMethod,
            'desc'
          )})`
        } else {
          row.taccReceivable = ''
        }
        row.csmAddress = row.csmAddress.includes('市') ? row.csmAddress.replace(/市/, ' ').split(' ')[1] : row.csmAddress
        // row.csmTypeName = this.customerTypeMap[row.csmType] || '居民用户'
        row.csmTypeName =
          formatColumnMap(this.customerType, 'value', row.csmType, 'desc') || '居民用户'
        row.goodsDesc = row.goodsDesc.split('^')[0]
        if (items.length > 0) {
          row.price = items[0].gprince
        }
        if (row.isPickUp === 1) {
          row.orgNewName = row.orgName + '零售单(自提)'
        } else {
          row.orgNewName = row.orgName + '零售单'
        }
        if (row.preferentialCount === 0) {
          row.preferentialCount = ''
        }
        row.treceivables = this.toDecimal(row.treceivables, 2).toFixed(2)
        row.fee1 = this.toDecimal(row.fee1 / 100, 2).toFixed(2)
        row.fee2 = this.toDecimal(row.fee2 / 100, 2).toFixed(2)
        if (row.fee1 === 0) {
          row.fee1 = ''
        }
        if (row.fee2 === 0) {
          row.fee2 = ''
        }
        if (row.ownerName === null || row.ownerName === undefined) {
          row.ownerName = ''
        }
        if (row.remark === null || row.remark === undefined) {
          row.remark = ''
        }
        if (row.preferentialPackageName === null || row.preferentialPackageName === undefined) {
          row.preferentialPackageName = ''
        }
        let printcmd = {
          cmd: 2,
          title: `正在对订单${row.orderCode}进行配送单打印`,
          elements: []
        }
        console.log('===>>>printcmd:', temp, row)
        printcmd = { ...printcmd, ...temp }
        console.log(items)
        console.log(printcmd)
        row.image = ''
        if (row.imageList && row.imageList.length > 0) {
          row.image = row.imageList[0] || ''
        }
        const _jCPrint = this.getwindowJCPrint()
        _jCPrint.process(printcmd, temp, row, items)
        delete printcmd.els
        if (_jCPrint.firePush(JSON.stringify(printcmd))) {
          this.$message.success('打印指令已发送')
        } else {
          this.$message.error('打印未连接')
        }
      },
      getwindowJCPrint() {
        const _jCPrint = window.jCPrint
        if (_jCPrint) {
          return _jCPrint
        }
        return window.parent.jCPrint
      },
      // 回单打印
      async returnPrint(row) {
        const params = {
          orderCode: this.detail.orderCode
        }
        const { status, data } = await batchOrderBatchDetail(params)
        if (status === 200) {
          this.doReturnPrint(this.detail, data)
        }
      },
      printDataHandle(row, items) {
        row.printDt = parseTime(row.transactTime, '{y}-{m}-{d} {h}:{i}')
        row.transactTime = parseTime(row.transactTime, '{y}-{m}-{d} {h}:{i}:{s}')
        // row.dateTimeSpare2 = dayjs(row.dateTimeSpare2).format('YYYY-MM-DD hh:mm')
        row.appointmentDt = (row.appointmentDt && row.dateTimeSpare1) ? parseTime(row.appointmentDt, '{y}-{m}-{d}') + ' ' + parseTime(row.appointmentDt, '{h}:{i}') + '~' + parseTime(row.dateTimeSpare1, '{h}:{i}') : ''
        row.signDt = parseTime(row.signDt, '{y}-{m}-{d} {h}:{i}')
        row.payMethodName = formatColumnMap(
          this.paymentMethodMap,
          'value',
          row.paymentMethod,
          'desc'
        )
        row.fromPlatName = formatColumnMap(
          this.orderSourceMap,
          'value',
          row.fromPlat,
          'desc'
        )

        row.printMoney = `${row.treceivables}(${toRMB(row.treceivables)})`
        row.payMethod = ''
        if (row.fromPlat !== 1 && row.fromPlat !== 7) {
          for (var item in this.paymentMethodMap) {
            if ((item && row.paymentMethod) > 0) {
              row.payMethod += this.paymentMethodMap[item].desc + ','
            }
          }
          row.payMethod = (row.payMethod || '').replace(/(^,+)|(,+$)/g, '')
        }
        for (var i in items) {
          const item = items[i]
          item.goodsTotalPrice = this.toDecimal(item.gcount * item.gprince, 2).toFixed(2)
          item.gprince = this.toDecimal(item.gprince, 2).toFixed(2)
          item.fee1 = this.toDecimal(item.fee1, 2).toFixed(2)
          item.fee2 = this.toDecimal(item.fee2, 2).toFixed(2)
        }
        if (row.payStatus === 3) {
          row.printMoney = `${row.printMoney} 已支付(${formatColumnMap(
            this.paymentMethod,
            'value',
            row.payMethod,
            'desc'
          )})`
        } else {
          row.taccReceivable = ''
        }
        row.csmAddress = row.csmAddress.includes('市') ? row.csmAddress.replace(/市/, ' ').split(' ')[1] : row.csmAddress
        // row.csmTypeName = this.customerTypeMap[row.csmType] || '居民用户'
        row.csmTypeName =
          formatColumnMap(this.customerType, 'value', row.csmType, 'desc') || '居民用户'
        row.goodsDesc = row.goodsDesc.split('^')[0]
        if (items.length > 0) {
          row.price = items[0].gprince
        }
        if (row.isPickUp === 1) {
          row.orgNewName = row.orgName + '零售单(自提)'
        } else {
          row.orgNewName = row.orgName + '零售单'
        }
        if (row.preferentialCount === 0) {
          row.preferentialCount = ''
        }
        row.treceivables = this.toDecimal(row.treceivables, 2).toFixed(2)
        row.fee1 = this.toDecimal(row.fee1 / 100, 2).toFixed(2)
        row.fee2 = this.toDecimal(row.fee2 / 100, 2).toFixed(2)
        if (row.fee1 === 0) {
          row.fee1 = ''
        }
        if (row.fee2 === 0) {
          row.fee2 = ''
        }
        if (row.totalFee4) {
          row.totalFee4 = row.totalFee4.toFixed(2)
        } else {
          row.totalFee4 = '0.00'
        }
        if (row.ownerName === null || row.ownerName === undefined) {
          row.ownerName = ''
        }
        if (row.remark === null || row.remark === undefined) {
          row.remark = ''
        }
        if (row.preferentialPackageName === null || row.preferentialPackageName === undefined) {
          row.preferentialPackageName = ''
        }
        return { row, items }
      },
      async doReturnPrint(r, items) {
        let row = JSON.parse(JSON.stringify(r))
        const cache = JSON.parse(localStorage.tp)
        if (!cache) {
          this.$message.warning('请先设置打印模板')
          return
        }
        const temp = cache['39']
        if (!temp) {
          this.$message.warning('请先设置打印模板')
          return
        }
        const d = await this.printDataHandle(row, items)

        row = d.row
        items = d.items
        let printcmd = {
          cmd: 2,
          title: `正在对订单${row.orderCode}进行配送单打印`,
          elements: []
        }
        printcmd = { ...printcmd, ...temp }
        row.image = ''
        if (row.imageList && row.imageList.length > 0) {
          row.image = row.imageList[0] || ''
        }
        const _jCPrint = this.getwindowJCPrint()
        _jCPrint.process(printcmd, temp, row, items)
        delete printcmd.els
        if (_jCPrint.firePush(JSON.stringify(printcmd))) {
          this.$message.success('打印指令已发送')
        } else {
          this.$message.error('打印未连接')
        }
      },
      toDecimal(str, p) {
        var reg = /^(-?\d+)(\.\d+)?$/
        if (reg.test(str)) {
          return parseFloat(str).toFixed(p || 2) * 1
        }
        return 0
      },
      // 收款
      async openGather() {
        await this.$refs.gather.open(this.detail)
      },
      // 获取所属机构数据
      async getTreeData() {
        const data = this.orgList.map(item => ({
          label: item.name,
          ...item
        }))
        this.treeData = getTreeData(data)
      },
      async showCsmDetail() {
        const csmDetail = document.getElementsByClassName('csmDetail')[0]
        if (!csmDetail) {
          await this.$refs.csmDetail.open(this.detail)
        } else {
          this.$message.warning('该信息弹窗已存在，请关闭当前弹窗')
        }
      },
      // 气瓶详情
      async showCylinderDetail(val, code) {
        if (val) {
          await this.$refs.cylinderDetail.open(val, code)
        } else {
          this.$message.warning('暂无相关信息')
        }
      },
      // 安检详情
      showCheckDetail(checkCode) {
        this.$refs.securityOrderInfo.open({ checkId: checkCode }, '安检信息')
      },
      // 押金详情
      async showDeposit(depositCode) {
        console.log('押金单号', depositCode)
        // const res = await givebackQueryDepositResult({ depositCode })
        // console.log('押金明细', res.data)
        // this.$refs.popups.open(res.data, 'info')
      },
      refresh() {

      },
      // 获取权限
      getPermission(scope) {
        // 超级管理员返回所有用户权限
        if (store.getters.userInfo && store.getters.userInfo.expand1 === '1') return true
        const csmRouter = this.menusArr.find(item => item.menuId === 301)
        if (!csmRouter.btnScope) return true
        const btnScopes = [csmRouter.btnScope]
        console.log('btnScopes', btnScopes.some(btnScope => btnScope >> (scope - 1) & 0x01))
        return btnScopes.some(btnScope => btnScope >> (scope - 1) & 0x01)
      },
      async editAppointmentTime(row) {
        const statusRes = await freeBottle({ orderCode: row.orderCode	})
        if (statusRes && statusRes.data) {
          if (!statusRes.data.chipStatus && statusRes.data.chipStatus === 0) {
            if (row.orderStatus === 1 || row.orderStatus === 2) {
              this.setAppointmentTime(row)
            } else {
              this.$message.warning('请检查订单状态')
            }
          }
          // 自有瓶退单
          if (statusRes.data.chipStatus && (statusRes.data.chipStatus === 1 || statusRes.data.chipStatus === 2)) {
            this.setAppointmentTime(row)
          }
        } else {
          if (row.orderStatus === 1 || row.orderStatus === 2) {
            this.setAppointmentTime(row)
          } else {
            this.$message.warning('请检查订单状态')
          }
        }
      },
      async setAppointmentTime(rowVal) {
        const param = {
          row: {
            ...rowVal,
            appointmentTime: (rowVal.appointmentDt && rowVal.dateTimeSpare1) ? parseTime(rowVal.appointmentDt, '{y}-{m}-{d} {h}:{i}') + ' ~ ' + parseTime(rowVal.dateTimeSpare1, '{h}:{i}') : ''
          },
          clientSelected: {
            corpSN: rowVal.corpSN,
            csmId: rowVal.csmId
          }
        }
        await this.$refs['changeAppointmentDt'].open(param.row, param.clientSelected)
        this.getDetailData(rowVal.orderCode)
        this.getFlowInfoData(rowVal.orderCode)
      },
      shut() {
        this.resolve()
      },
      optionBtnChange() {
        this.innerDrawer = !this.innerDrawer
      }
    }
  }
</script>

<style lang="scss" scoped>
.orderDetail {
  /deep/.el-drawer {
    width: 80% !important;
  }
  .csmDetail {
    /deep/.el-drawer {
      width: 75% !important;
    }
  }
}
/deep/.el-drawer__header {
  padding: 15px 20px;
  margin-bottom: 0;
}
.center {
  display: flex;
  height: calc(100vh - 120px);
  padding: 0 20px;
  overflow-y: auto;
  // height: 700px;
  font-size: 14px;
  font-weight: 400;
  color: #333;
  text-align: left;
  .left {
    position: relative;
    width: 75%;
    height: 100%;
    padding-right: 40px;
    .doneImg {
      position: absolute;
      top: 80px;
      right: 80px;
      width: 61px;
      height: 61px;
      //background-image: url("../../../../assets/done2.png");
      background-size: 61px 61px;
    }

    .settlement {
      margin-top: 20px;
      font-size: 16px;
      font-weight: 700;
      color: #F54D28;
      text-align: right;
      p {
        margin-bottom: 8px;
      }
      .total-txt {
        font-size: 14px;
        font-weight: 700;
        color: #000;
      }
    }

    .el-table {
      margin-bottom: 20px;
    }

    .el-descriptions {
      margin-bottom: 20px;
    }

    img {
      width: 61px;
      height: 61px;
      margin-left: 80px;
    }
    .steps-box {
      width: 100%;
      padding-top: 25px;
    }
    .client-box {
      margin-top: 20px;
      .title {
        margin-bottom: 10px;
        font-weight: 600;
        color: #38BDBD;
      }
      .client-table {
        border: 1px solid #e3e3e3;
        .table-one-row {
          border-bottom: 1px solid #e3e3e3;
          div {
            display: inline-block;
          }
          .client-name {
            width: 16%;
            padding: 10px 0;
            text-align: center;
            background-color: #f1f1f1;
          }
          .client-value {
            width: 32%;
            padding: 10px 0;
            text-align: left;
          }
        }
        .table-two-row {
          border-bottom: 1px solid #e3e3e3;
          div {
            display: inline-block;
          }
          .client-name {
            width: 16%;
            padding: 10px 0;
            text-align: center;
            background-color: #f1f1f1;
          }
          .client-value {
            padding: 10px 0;
            text-align: left;
            flex: 1;
          }
        }
        .table-two-row:last-child {
          border-bottom: none;
        }
      }
    }
    .commodity-box {
      margin-top: 20px;
      .title {
        margin-bottom: 10px;
        font-weight: 600;
        color: #38BDBD;
      }
      .commodity-table-box {
        border: 1px solid #e3e3e3;
        .table-title {
          background-color: #f1f1f1;
          div {
            display: inline-block;
            width: 10.5%;
            padding: 10px 0;
            text-align: center;
          }
        }
        .table-value {
          border-top: 1px solid #e3e3e3;
          div {
            display: inline-block;
            width: 10.5%;
            padding: 10px 0;
            text-align: center;
          }
        }
      }
    }
    .cost-box {
      margin-top: 20px;
      .title {
        margin-bottom: 10px;
        font-weight: 600;
        color: #38BDBD;
      }
      .cost-table-box {
        border: 1px solid #e3e3e3;
        .table-title {
          background-color: #f1f1f1;
          div {
            display: inline-block;
            width: 16%;
            padding: 10px 0;
            text-align: center;
          }
        }
        .table-value {
          border-bottom: 1px solid #e3e3e3;
          div {
            display: inline-block;
            width: 16%;
            padding: 10px 0;
            text-align: center;
          }
        }
        .table-one-row {
          border-bottom: 1px solid #e3e3e3;
          div {
            display: inline-block;
          }
          .client-name {
            width: 16%;
            padding: 10px 0;
            text-align: center;
            background-color: #f1f1f1;
          }
          .client-value {
            width: 32%;
            padding: 10px 0;
            text-align: left;
          }
        }
        .table-one-row:last-child {
          border-bottom: none;
        }
      }
    }
    .signature {
      .item-title {
        padding: 20px 20px 0 20px;
        margin-bottom: 10px;
        font-weight: 600;
        color: #38BDBD;
      }
      .image {
        width: 120px;
        height: 150px;
        padding: 10px 0;
        margin-right: 15px;
      }
    }
  }

  .right {
    height: 100%;
    padding-left: 15px;
    border-left: 1px solid #e3e3e3;
    flex: 1;
    .timeline-title {
      width: 100%;
      padding: 8px;
      margin-bottom: 10px;
      color: white;
      background-color: #38BDBD;
      border-radius: 5px;
    }
    // span {
    //   display: block;
    //   height: 24px;
    //   padding-left: 20px;
    //   font-weight: 700;
    //   line-height: 24px;
    //   text-align: center;
    //   background-color: #e3e3e3;
    // }

    .el-timeline {
      margin-top: 20px;
    }
    .optionBtn {
      position: absolute;
      top: 24px;
      cursor: pointer;
    }
  }
}
.demo-drawer__footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 55px;
  background: white;
  border: 2px solid #DCDFE6;
  .btn-group {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    margin-right: 21%;
    .btns {
      display: flex;
      margin-left: 15px;
    }
  }
}
.title {
  display: flex;
  padding: 20px 20px 0 20px;
  // margin-bottom: 20px;
  .title-text {
    line-height: 25px;
  }
  .tag {
    margin: 0 10px;
  }
}
.label-child {
  position: absolute;
  top: 30px;
  right: 10px;
  width: 90px;
  height: 24px;
  font-size: 12px;
  line-height: 24px;
  color: #fff;
  text-align: center;
  transform: rotate(50deg);
}
.red {
  background-color: #F56C6C;
  border-color: red;
}
.green {
  background-color: #38BDBD;
  border-color: #1D7471;
}
.csmCode {
  color: #38BDBD;
  cursor: pointer;
}
.orange-text {
  color: #E6A23C;
}
.red-text {
  color: #F56C6C;
}
.overtime-content {
  display: flex;
  .right-overtime {
    height: 100%;
    padding-left: 15px;
    margin-right: 10px;
    flex: 1;

    .title-top {
      display: flex;
      justify-content: space-between;
      .timeline-title {
        width: 49%;
        padding: 8px;
        margin-bottom: 10px;
        color: white;
        background-color: #38BDBD;
        border-radius: 5px;
      }
      .title-orange {
        background-color: #f59a23;
      }
    }

    .overtime-detail {
      margin-bottom: 10px;
      .time-title {
        padding-top: 4px;
        padding-left: 4px;
        margin-bottom: 8px;
        font-size: 13px;
        line-height: 1;
        color: #909399;
      }
      .item-detail {
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        line-height: 22px;
        h4 {
          margin: 0;
        }
        .el-card {
          width: 49%;
        }
        .overtime-item {
          padding-right: 20px;
        }
      }
    }
  }
}
.overTimeDrawer {
  .optionBtn {
    position: absolute;
    top: 20px;
    left: 20px;
    cursor: pointer;
  }
}
</style>
